
 /*
 * 整体妆容的分类管理列表
 * @Author: zfx
 * @Date: 2018-06-26 17:52:07
 */
<style lang="less" rel="stylesheet/less" type="text/less" >
.v-customer-classify-index{
	.ivu-table-column-center{
		padding: 5px 0;
	}
	.thumb-img {
		cursor: pointer;
	}
}
</style>
<template>
	<div class="v-customer-classify-index">
		<Table
			:columns="columns"
			:loading="loading"
			:data="classifyData"
			:height="tableHeight()"
			border
			class="personal-scrollbar"
			@on-sort-change="sortable"/>
	</div>
</template>

<script>
import { Button } from 'iview';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'ClassificationIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		classifyData: {
			type: Array,
			default() {
				return [];
			},
		},
		jumpType: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('classification.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				// {
				// 	title: this.$t('classification.thumb'),
				// 	key: 'image',
				// 	align: 'center',
				// 	render: (h, { row }) => {
				// 		const image = row.image ? <img onClick={() => this.showPicture(row.image)} src={row.image} alt="无" width="50%" class="thumb-img"/> : this.$t('common.none');
				// 		return (
				// 			<div>{image}</div>
				// 		);
				// 	},
				// },
				{
					title: this.$t('classification.priority'),
					key: 'priority',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div> { String(row.priority) || '-' } </div>,
				},
				{
					title: this.$t('classification.created_at'),
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => <div> { row.created_at } </div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					render: (h, { row }) => (
						<div>
							<Button name="index__edit" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('common.edit') }
							</Button>
							<Button name="name__delete" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('delete', row.id); }} type="error">
								{ this.$t('common.delete') }
							</Button>
						</div>),
				},
			],
		};
	},
	methods: {
		/**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
		sortable(param) {
			const search_param = {
				sort_column: param.key,

				sort_by: param.order === 'normal' ? '' : param.order.toLocaleUpperCase(),
			};

			this.$emit('sort', search_param);
		},

	},
};
</script>
